import { useEffect, useRef, useState } from 'react';
import {
  View,
  Text,
  Image,
  ScrollView
} from '@tarojs/components';
import {
  AtFloatLayout
} from 'taro-ui'
import {
  queryUserInfo,
  queryUserPoints,
  queryUserHistory,
  queryPointsRedeem,
  postUserInvitations
} from '@/api';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import './index.css';

const ModalTask = (props) => {
  let {
    userInfo,
    point
  } = props;
  useEffect(() => {
    onLoadPoint();
  }, []);

  useShareAppMessage((res)=>{
    if (res.from == 'button') {
      onPostInvitations();
      return {
        title: '快来围观我的写真吧',
        path: '/pages/index/index',
        imageUrl: 'https://jala-test-images.sndaurl.cn/images/share_img.png'
      }
    }
  })

  const onPostInvitations = async()=>{
    await postUserInvitations();
  }

  const onClose = () => {
    props.onClose && props.onClose();
  }

  return (
    <View
      className='maskView'
      onClick={()=>{props.onClose && props.onClose()}}
    >
      <View className='modal_task'>
        <View className='modal_task_title'>
          <Image
            src='https://jala-test-images.sndaurl.cn/images/task_title.png'
            className='modal_task_title_img'
            mode='aspectFill'
          />
          <Image
            src='https://jala-test-images.sndaurl.cn/images/closeIcon.png'
            className='modal_task_title_icon'
            mode='aspectFill'
            onClick={()=>{onClose()}}
          />
        </View>
        <View className='modal_task_main'>
          <View className='modal_task_section'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>加入会员（1/1）</View>
            <View className='modal_task_section_desc'>变妆次数+3，活动期间限一次</View>
            <View className='modal_task_section_action finish'>已完成</View>
          </View>
          <View className='modal_task_section'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>邀请好友（{userInfo.invitations}/5）</View>
            <View className='modal_task_section_desc'>成功邀请1位用户，即可获得1次变妆机会</View>
            {
              userInfo.invitations == 5 ? (
                <View className='modal_task_section_action pedding'>已完成</View>
              ) : (
                <Button
                  openType='share'
                  className={`modal_task_section_action`}
                >
                  完成任务
                </Button>
              )
            }
          </View>
          {/* <View className='modal_task_section'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>订阅店铺（0/1）</View>
            <View className='modal_task_section_desc'>首次订阅关注店铺，变妆次数+1，活动期间</View>
            <View className='modal_task_section_action '>完成任务</View>
          </View> */}
          <View className='modal_task_section'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>积分兑换（当前积分：{point}）</View>
            <View className='modal_task_section_desc'>自然堂100会员积分可兑换1次变妆机会，</View>
            <View className='modal_task_section_action '>完成任务</View>
          </View>
          {/* <View className='modal_task_section'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/arrowBg.png'
              className='modal_task_section_icon'
              mode='aspectFill'
            />
            <View className='modal_task_section_name'>获取更多积分</View>
            <View className='modal_task_section_desc w_full'>可微信搜索“自然堂官方商城”小程序进行购</View>
          </View> */}
        </View>
      </View>
    </View>
  )
}

export default ModalTask;
